<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #box1 {
        width: 200px;
        height: 200px;
        background-color: #bfa;
      }

      #box2 {
        width: 100px;
        height: 100px;
        background-color: orange;
      }

      #box3 {
        width: 100px;
        height: 100px;
        background-color: yellow;
      }
    </style>
    <script src="./scripts/jquery-3.6.1.js"></script>
    <script>
      $(function () {
        /* 
                    empty() 删除所有的子元素
                    remove() 移除元素（移除事件）
                    detach() 移除元素
                */

        var $li = $('li:nth-child(1)');

        $li.click(function () {
          alert('哈哈哈');
        });

        $('#btn').click(function () {
          // $("ul").empty()

          // $("li:nth-child(1)").remove()
          $('li:nth-child(1)').detach();
        });

        $('#btn2').click(function () {
          $('ul').append($li);
        });

        $('#btn3').click(function () {
          /* 
                        attr() 读取布尔值返回实际值
                        prop() 读取布尔值返回 true/false
                            - 用来读取或设置元素的属性
                            - 读取布尔值属性时两者不会返回不同的值
                    */

          var type = $('input[type=text]').attr('type');
          var name = $('input[type=text]').prop('name');

          var checked = $('input[type=radio]').prop('checked');

          // alert(checked)

          // $("input[type=text]").prop("value","哈哈")
          // $("input[type=radio]").prop("checked", true)

          $('input[type=text]').val('xxx');
        });
      });
    </script>
  </head>
  <body>
    <button id="btn">点我</button>
    <button id="btn2">点我2</button>
    <hr />

    <ul>
      <li>孙悟空</li>
      <li>猪八戒</li>
      <li>沙和尚</li>
      <li>唐僧</li>
    </ul>

    <input type="radio" name="gender" value="male" /> 男 <input type="radio" name="gender" value="female" /> 女

    <hr />

    <input type="text" name="username" />

    <hr />

    <button id="btn3">点我3</button>
  </body>
</html>
